<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To Do List</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="favicon.ico">
    <base target="_blank" href="#">
 </head>

<body>

<!-- 头部标题 + 输入表单 + 用户信息 -->
<div class="upper clearfix layer">

    <div class="title fl">
        <h1><a href="#">To Do List</a></h1>
    </div>
    
    <div class="userMessage fr">
        <ul class="clearfix">
            <li class="fl">
                <span class="iconfont">&#xe60a;</span>
                <a href="#">登录</a>
                <span>/</span>
                <a href="#">注册</a>
            </li>
        </ul>
    </div>

    <div class="form clearfix">
        <form class="main" action="#" method="get">
            <div class="inputBox fl">
                <span class="iconfont">&#xe60e;</span>
                <input type="text" name="addItem" value="在这里写下下一项待办事项:)" style="color: #999;" onfocus="if(this.value == '在这里写下下一项待办事项:)') {
                    this.value = '';
                    this.style.color='#3c3c3c';
                    }" onblur="if(this.value == '') {
                        this.value = '在这里写下下一项待办事项:)';
                        this.style.color='#999'
                        }">
            </div>
            <div class="button fl">
                <button type="submit" value="确定添加">添加</button>
            </div>
        </form>
    </div>

</div>

<!-- 已完成和未完成文本列表组 -->
<div class="content layer">
    <ul class="undone">
        <h3 class="undoneTitle"><a href="#">未完成任务</a></h3>
        <li>
            <button class="iconfont">&#xe64e;</button>
            <span>eg.123</span>
        </li>
        <li>
            <button class="iconfont">&#xe64e;</button>
        </li>
        <li>
            <button class="iconfont">&#xe64e;</button>
        </li>
    </ul>

    <ul class="done">
        <h3 class="doneTitle"><a href="#">已完成任务</a></h3>
        <li>
            <button class="iconfont">&#xe64d;</button>
            <span>eg.123</span>
        </li>
        <li>
            <button class="iconfont">&#xe64d;</button>
        </li>
        <li>
            <button class="iconfont">&#xe64d;</button>
        </li>
    </ul>
</div>

</body>
</html>